<style scoped>
    .main {
        height: 100%;
    }

    .main >>> .hd-logo {
        width: auto;
        height: 100%;
    }

    .main >>> .layout-logo {
        width: 36%;
    }
    .main >>> .layout-menus {
        float: left;
        width: 25%;
    }
    .home-login {
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .home-name {
        color: white;
        font-size: 18px;
        font-weight: bold;
        margin-right: 15px;
    }

    .home-btn {
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        margin-right: 15px;
    }
</style>

<template>
    <div class="main">
        <main-theme1
                :siderWidth="220"
                ref="mainTheme"
                collapsible
                homeName="首页"
                :headerMenusShow="closeHeaderMenu"
                logoPath="https://skv4.oss-cn-hangzhou.aliyuncs.com/ji-wei/dang-an-logo.png">
            <router-view></router-view>
            <template slot="headerRight">
                <div class="home-name">{{ getUserName }} | </div>
                <Poptip trigger="hover"  content="操作手册" placement="bottom">
                    <div class="home-btn" @click="guide"><Icon type="md-book" /></div>
                </Poptip>
                <Poptip trigger="hover" content="注销" placement="bottom">
                    <div class="home-login" @click="logout"><Icon type="md-exit" /> </div>
                </Poptip>
                <!--<div class="home-login" @click="logout">退出登录</div>-->
            </template>
        </main-theme1>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      closeHeaderMenu: true,
      severUserInfo: {}
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo',
      'setUserInfo',
      'getPhpMenusData',
      'getJavaMenusData',
      'setBreadCrumb'
    ]),
    guide () {
      switch (this.companyType) {
        case '1':
          window.open('https://note.youdao.com/ynoteshare1/index.html?id=9790a7d1920d83c7d1b95292ecb6005b&type=note')
          break
        case '2':
          window.open('http://note.youdao.com/noteshare?id=f68b4289415bbc2dc65f17436c795aa5')
          break
        default:
          window.open()
          break
      }
    },
    logout () {
      this.$refs.mainTheme.logout()
    }
  },
  computed: {
    companyType () {
      return window.localStorage.getItem('company_type')
    },
    getUserName () {
      if (this.severUserInfo.data) {
        return this.severUserInfo.data.name + '【' + this.severUserInfo.data.loginName + '】'
      } else {
        return '未登录'
      }
    }
  },
  mounted () {
    // TODO 如果是java菜单还需要调用综合菜单-id需要自己配置
    this.getUserInfo().then(resx => {})
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.getJavaMenusData('0,1,bf0764d1-3373-11ea-ba01-ec0d9acf02d2')
  }
}
</script>
